<template>
  <div class="teacher-management">
    <h2>{{ $t('message.teacherManagement') }}</h2>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane :label="$t('message.courses')" name="courses">
        <CourseManagement />
      </el-tab-pane>
      <el-tab-pane :label="$t('message.schedule')" name="schedule">
        <ScheduleManagement />
      </el-tab-pane>
      <el-tab-pane :label="$t('message.bookings')" name="bookings">
        <BookingManagement />
      </el-tab-pane>
      <el-tab-pane :label="$t('message.messages')" name="messages">
        <MessageManagement />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import CourseManagement from '@/components/admin/CourseManagement.vue';
import ScheduleManagement from '@/components/admin/ScheduleManagement.vue';
import BookingManagement from '@/components/admin/BookingManagement.vue';
import MessageManagement from '@/components/admin/MessageManagement.vue';

export default {
  name: 'TeacherManagement',
  components: {
    CourseManagement,
    ScheduleManagement,
    BookingManagement,
    MessageManagement
  },
  setup() {
    const { t } = useI18n();
    
    const activeTab = ref('courses');
    
    return {
      activeTab
    };
  }
};
</script>

<style scoped>
.teacher-management {
  padding: 20px;
}
</style>